Webshop template
Wat is een template?
Om een Afosto shop te bouwen wil je natuurlijk niet vanaf nul beginnen, daarom hebben we een standaard template gemaakt die als basis gebruikt kan worden om jouw Afosto shop te bouwen. In dit template zijn allerlei zaken al voor je klaargezet. Bijvoorbeeld een collectie pagina met een product grid en filters ernaast, een cart functionaliteit en een functionerende checkout. Hierdoor hoef je niet alles opnieuw uit te vinden, maar kun je met een solide basis aan de slag.
Binnen het template zijn ook een aantal componenten gemaakt die je kan gebruiken in jouw shop. Bijvoorbeeld afbeelding sliders en blog overzichten.
Welke technieken worden gebruikt in het template?
Het template is gebouwd op basis van Twig, wat al een techniek op zichzelf is. Maar er worden een aantal andere technieken gebruikt om het ontwikkelen binnen het template te versimpelen. Alle technieken staan uitgelegd op de Template/Technieken pagina.
Hoe is de structuur opgebouwd van de frontend van Afosto?
Het template bestaat uit 2 hoofd mappen: assets en twig. In assets vind je bestanden voor de Javascript en SCSS. Hier staat ook nog een css map, maar deze is leeg en wordt eigenlijk niet meer gebruikt.
de twig map bevat een aantal mappen die de gehele shop opbouwen qua html. De basis van elke pagina is te vinden in de map layout. Hier staat het bestand index.twig wat in principe de algehele schil om elke pagina is. In de file zie je dan ook de <html>, <head> en <body> elementen.
In het body element staat de regel {% include 'layouts/base.twig' %}. Om alles een beetje gescheiden te houden wordt de rest van de pagina html opgebouwd in het bestand layouts/base.twig. Hier wordt bijvoorbeeld voor een aantal pagina's logica toegevoegd om een ander bestand in te laden. De regel {{ content }} vult echter deze basis met de html van desbetreffend type pagina.
Als typen pagina's kun je onderscheiden: homepage, product pagina, collectie pagina, cart, checkout, account, search, wishlist en blog. Daarnaast heb je nog een standaard pagina, deze vind je in page/index.twig. Elk type pagina heeft een zogenoemd entry point. Voor de homepage is dit bijvoorbeeld page/home.twig. Alles wat je in dit bestand plaatst wordt in de variabele content gezet binnen het bestand layout/index.twig. Daardoor wordt de head, de header, de footer, de winkelwagen en andere zaken om de html van de homepage gezet en krijg je een volledige pagina.
Voor een paar pagina's zijn varianten toegevoegd. Bijvoorbeeld voor de productpagina zijn 3 opties beschikbaar in de product map. Voor de productpagina is ook het index.twig bestand het entry point. In dit bestand vind je geen html, maar alleen maar Twig code. Hier worden een aantal variabelen, voor gebruik binnen de varianten, aangemaakt en kun je een variant selecteren. De regel {% set code = "product-1" %} bepaalt welke variant wordt toegepast op de productpagina. Deze kun je dus aanpassen om een van de ander 2 opties te bekijken. De code staat gelijk aan de bestandsnaam zonder de .twig extensie. Bestaat dit bestand niet dan wordt product/default.twig gebruikt.
Deze optie heb je ook voor de cart en checkout (checkout raden we af om een andere versie te gebruiken dan stepped of checkout_v4 als je een v4 shop bouwt).
Er zijn ook een aantal componenten beschikbaar in de map macros . Hier staan bijvoorbeeld de sliders, menus, plugin widgets en andere display opties in. Deze macros kun je gebruiken door ze te importeren op de volgende manier.
1{% import 'macros/displays.twig' as af_displays %}Vervolgens kun je alle componenten binnen de display macro gebruiken op de volgende manier.
1{{ af_displays.products({
2 'products' : related_products,
3 'style' : 'grid',
4 'use_quickview': true
5}) }}Hoe dit precies werkt zal verdere uitleg vereisen.
Hoe werkt de editor?
In de editor kun je de bestanden van het template van een shop bekijken en bewerken. Er zijn een aantal dingen waar je om moet denken als je in de editor gaat werken.
Allerbelangrijkste is dat je weet in welke omgeving je aan het werk bent. Controleer dus altijd of je ingelogd bent op het juiste winkelier account. Controleer vervolgens in welke verkoopkanaal je de editor geopend hebt.
Dit is erg belangrijk omdat alles wat je veranderd, direct wordt doorgevoerd op de live website. Werk je dus op een site die al in gebruik is en verkeer van klanten krijgt, let dan goed op wat je opslaat. Een fout kan de site in een error status zetten waardoor het kan zijn dat de winkelier niks meer kan verkopen op de webshop.
Een bestand opslaan doe je met de toetscombinatie CTRL+S (voor mac is dit: CMD+S). Het gebruik van CTRL+Z kan voor de wijzigingen die je hebt gedaan vanaf dat je het bestand opent. Heb je wijzigingen gedaan aan bestand A en ben je naar bestand B gewisseld, dan kun je de wijzigingen van bestand A niet meer ongedaan maken met CTRL+Z.
Je hebt in elke file altijd een bepaalde data set beschikbaar. Om te zien welke data je beschikbaar hebt kun je een dump doen. Je zegt dan tegen Twig 'toon mij alle variabelen en hun waardes die ik hier beschikbaar heb. De regel code die je moet toevoegen om deze dump te zien is {{ dump() }}. Je krijgt waarschijnlijk een erg lange lijst te zien met allerlei data. Als je weer waar je naar op zoek bent kun je de dump ook specificeren. Door bijvoorbeeld {{ dump(menus.default) }} te gebruiken kun je zien wat er allemaal binnen het menu default beschikbaar is. Hiermee kun je dus altijd je weg vinden in de beschikbare data.
Hoe werk ik met tekstblokken?
Tekstblokken zijn ontstaan door de behoefte om herbruikbare stukjes tekst te kunnen plaatsen in de shops. Bijvoorbeeld een melding op de site wegens vertraagde levering. Deze tekstblokken kun je in de Twig uitlezen en tonen. We hebben echter ook andere manieren gevonden om de tekstblokken in te zetten. Zo kunnen we een tabel opzetten met bepaalde data die we in de twig weer omzetten naar een object. Daarmee voegen we dus extra data toe aan een pagina die beheerbaar is door de winkelier.
Je beheert je tekstblokken in het platform onder het kopje Weergave op het dashboard van je shop. Hier kun je bestaande tekstblokken bewerken en nieuwe aanmaken. Als je een nieuw tekstblok toevoegt kun je een naam, een unieke naam waarmee je hem in de code kan identificeren en tekst toevoegen.
In de twig zijn de tekstblokken beschikbaar als blocks. Dit is een lijst met alle tekstblokken die zijn aangemaakt. Stel dat we een tekstblok met de unieke naam awesome-block hebben aangemaakt, dan kunnen we de data van dit blok benaderen op het pad blocks['awesome-block']. Omdat twig geen - ondersteund in de naam van variabelen of functies kunnen we het niet als blocks.awesome-block benaderen, denk hier dus om bij het aanmaken of wanneer je het aanroept. Als je deze data dumpt, {{ dump(blocks['awesome-block']) }}, kun je zien welke data je beschikbaar hebt binnen een tekstblok. Dit zijn identifier, title en content. Dus om de content van het blok te plaatsen gebruiken we {{blocks['awesome-block'].content}}.
Hoe werk ik met sliders?
Veel sites hebben een carrousel met afbeeldingen die automatisch beweegt om bijvoorbeeld producten aan te prijzen. Om dit soort elementen beheerbaar te maken hebben we sliders toegevoegd. Een slider is een verzameling foto's waarbij je voor elke foto een titel en tekst kan toevoegen. Sliders gebruiken we niet alleen voor een carrousel maar bijvoorbeeld ook voor de banner boven een pagina of een grid van afbeeldingen. Je kan het dus beter zien als een bibliotheek met afbeeldingen die je kan aanroepen in de twig.
Je beheert je sliders in het platform onder het kopje Weergave op het dashboard van je shop. Hier kun je bestaande sliders bewerken en nieuwe aanmaken. Als je een nieuwe slider toevoegt, kun je een naam en slides toevoegen.
Hoe extend ik een template?
Wanneer de winkelier ook in andere talen wil verkopen zal er een webshop naast de huidige moeten komen met een andere taal. Je maakt dan een nieuw verkoopkanaal aan, maar moet je dan alle bestanden kopiëren? Gelukkig kunnen we met de vertaal module en de template extender het template van een andere shop gebruiken, en de tekst vertalen.
Als de plugin geïnstalleerd is staat er in het dashboard van je shops een nieuw item onder Apps genaamd Template Extender. Bij deze plugin kun je kiezen van welk verkoopkanaal het template gebruikt moet worden. Bijvoorbeeld voor de Duitse shop van Azalp gebruiken we het template dat ontwikkeld is op Azalp.nl.
Daarmee worden alle bestanden van het azalp.nl template ook gebruikt om de azalp.de shop te genereren. Het is wel zo dat het template dat op azalp.de staat leeg moet zijn. De bestanden die daar in staan overschrijven namelijk die van Azalp.nl. Dit zal voor problemen zorgen. Daarom moeten we het Azalp.de template opschonen. Dit doen we met behulp van een knop in de editor.
De Azalp.de shop is nu afhankelijk van het template van Azalp.nl, wijzigingen die daar worden gedaan zullen gelijk zijn doorgevoerd voor Azalp.de waardoor je niet meerdere templates hoeft te beheren.